<template>
  <div class="case_examine table-theme">
    <head-title title="审核--案例审核"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <div class="type-view">
            <tabs-view :list="classifyList" :tabsIndex="status" @roleType="stateType"></tabs-view>
          </div>
          <select-view
            :option-list="typeList"
            :value="type"
            placeholder="操作类型"
            type="type"
            @value="setSelectValue"
          >
          </select-view>
        </div>

        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总数据数：{{ total }}</p>
      <el-table :data="examineList">
        <el-table-column
          label="序号"
          align="center"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="工厂序号"
          align="center"
          prop="factory_id"
        ></el-table-column>
        <el-table-column
          label="用户序号	"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column
          label="案例名称	"
          align="center"
          prop="goods_name"
        ></el-table-column>
        <el-table-column
          label="平台款号	"
          align="center"
          prop="goods_sn"
        ></el-table-column>
        <el-table-column label="案例主图" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.image"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="工厂编号	"
          align="center"
          prop="factory_sn"
        ></el-table-column>
        <el-table-column
          label="工厂名称"
          align="center"
          prop="factory_name"
        ></el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="type_name"
        ></el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="status_name"
        ></el-table-column>
        <el-table-column
          label="拒绝原因"
          align="center"
          prop="reason"
        ></el-table-column>
        <el-table-column
          label="审核人"
          align="center"
          prop="examine_user_id"
        ></el-table-column>
        <el-table-column
          label="审核时间"
          align="center"
          prop="examine_time"
        ></el-table-column>
        <el-table-column
          label="申请时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="operate(0, scope.row.id)"
              >详情</el-button
            >
            <el-button
              v-if="scope.row.status == 0"
              type="primary"
              size="mini"
              @click="operate(1, scope.row.id)"
              >审核</el-button
            >
            <el-button
              v-if="scope.row.status == 0"
              type="danger"
              size="mini"
              @click="operate(2, scope.row.id)"
              >拒绝</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="operate(3, scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 拒绝原因弹框 -->
    <el-dialog
      title="拒绝原因"
      :visible.sync="remarksDialog"
      center
      :modal-append-to-body="false"
      width="680px"
    >
      <el-form
        :model="remarksForm"
        :rules="remarksFormRules"
        ref="remarksForm"
        label-width="120px"
      >
        <el-form-item label="拒绝原因:" prop="reason">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="remarksForm.reason"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarksDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick('remarksForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import SelectView from "@/components/SelectView";
import TabsView from '@/components/TabsView'
export default {
  components: {
    ImgPopover,
    SelectView,
		TabsView
  },
  data() {
    return {
      type: '', // 0  编辑商品 1 添加商品 2 删除商品  3 商品上架 4 商品下架
      remarksDialog: false,
      remarksForm: {
        reason: "",
      },
      remarksFormRules: {
        reason: [
          {
            required: true,
            message: "请输入内容",
          },
        ],
      },
      examineList: [], // 审核列表
      total: 0,
      totalData: 0,
      status: 0,
      page: 0,
      classifyList: ["全部","待审核","通过","拒绝",],
      classSelect: 0,
      selectContent: "",
      searchOption: [
        {
          value: 0,
          label: "平台款号",
        },
        {
          value: 1,
          label: "工厂编号",
        },
        {
          value: 2,
          label: "工厂名称",
        },
      ],
      typeList: [
        {
          label: "所有类型",
          value: "",
        },
        {
          label: "编辑案例",
          value: 0,
        },
        {
          label: "添加案例",
          value: 1,
        },
        {
          label: "删除案例",
          value: 2,
        },
        {
          label: "案例上架",
          value: 3,
        },
        {
          label: "案例下架",
          value: 4,
        },
      ],
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        category: 2,
        status:this.status === 0 ? '' : this.status -1
      };
      if (this.type !== "") {
        data.type = this.type;
      }

      if (this.classSelect == 0 && this.selectContent != "") {
        data.goods_sn = this.selectContent;
      } else if (this.classSelect == 1 && this.selectContent != "") {
        data.factory_sn = this.selectContent;
      } else if (this.classSelect == 2 && this.selectContent != "") {
        data.factory_name = this.selectContent;
      }

      this.$http(this.$ApiList.ExamineList, data).then((res) => {
        this.examineList = [];
        if (res.datas.length != 0) {
          this.examineList = res.datas.list;
          this.total = res.datas.count;
        }
      });
    },
    stateType(index) {
      this.status = index;
      this.init();
    },
    operate(type, id) {
      let data = {
        examine_id: id,
      };
      //type 0详情 1审核 2拒绝 3删除
      switch (type) {
        case 0:
          this.$router.push({
            path: "/case_examine_details",
            query: {
              id: id,
            },
          });
          break;
        case 1:
          this.$http(this.$ApiList.CaseSuccess, data).then((res) => {
            if (res.code == 200) {
              this.$layer.msg("操作成功");
              this.page = 1;
              this.init();
            }
          });
          break;
        case 2:
          this.remarksDialog = true;
          this.remarksForm.examine_id = id;
          break;
        case 3:
          this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$http(this.$ApiList.ExamineDelete, data).then((res) => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.page = 1;
                this.init();
              });
            })
            .catch(() => {});
          break;
      }
    },
    //提交
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http(this.$ApiList.CaseRefuse, this.remarksForm).then((res) => {
            if (res.code == 200) {
              this.$layer.msg("操作成功");
              this.remarksDialog = false;
              this.init();
            }
          });
        } else {
          this.$layer.msg("请填写完整信息后提交");
        }
      });
    },
    // 搜素
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    selectType() {
      this.init();
    },
    refreshPage() {
      this.page = 1;
      this.selectContent = "";
      this.classSelect = 0;
      this.status = 0;
      this.init();
    },
    setSelectValue(obj) {
      const { type, value } = obj;
      switch (type) {
        case "type":
          this.type = value;
          break;

        default:
          break;
      }
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
</style>
